<template>
    <div id='LoanFailure'>
        <div class="content">
           	<el-card class="box-card" shadow="hover">
           		<loading v-show="isLoading"></loading>
				<el-table
				v-show="!isLoading"
			    :data="tableData"
			    style="width: 100%">
			    <el-table-column
				label="序号"
                width="56"
                type="index"
				align="center">
				</el-table-column>
				<el-table-column
				prop="name"
				label="借款人"
				align="center">
				</el-table-column>
				<el-table-column
				prop="lendAmount"
				label="借款金额"
				:formatter="ccn"
				align="center">
				</el-table-column>
				<el-table-column
				prop="lendCycle"
				label="借款时长"
				align="center">
				</el-table-column>
				<el-table-column
				prop="lendRealAmount"
				:formatter="ccn"
				label="到账金额"
				align="center">
				</el-table-column>
				<el-table-column
				prop="serviceAmount"
				label="服务费"
				:formatter="ccn"
				align="center">
				</el-table-column>
				<el-table-column
				prop="cardName"
				label="开户银行"
				align="center">
				</el-table-column>
				<el-table-column
				property="cardNo"
				label="银行卡号"
				align="center">
				</el-table-column>
			    <el-table-column label="操作" align="center" width="228">
			     <template slot-scope="scope">
			       <el-button
			         size="mini"
			         :disabled="!tableData[scope.$index].brightTag"
			         :type="tableData[scope.$index].type"
			         @click="Relending(scope.$index,scope.row)">重新放款</el-button>
			       <el-button
			         size="mini"
			         type="danger"
			         @click="cancelLending(scope.row)">取消放款</el-button>
			     </template>
			    </el-table-column>
			  </el-table>
			  <el-pagination
			  	class="page"
			  	v-show="tableData.length"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-size="10"
				background
				layout="total, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
			</el-card>

			
        </div>
        <!-- -->
        
    </div>
</template>
<script>
import  { mapGetters, mapActions }  from 'vuex'
import Storage from '../utils/storage'
import { receiptApi }from '../api/api'
import loading from '../components/Loading.vue'
import moment from 'moment'
export default{

    data(){
        return{
           tableData: [],
	        type:'success',
	        isDisabled:false,
	        pageIndex:1,
	        currentPage:1,
	        total:0,
	        pageSize:10,
	        sessionId:"",
	        id:null,
	        isLoading:false,
        }
    },
    methods:{
      ...mapActions([
                'setSessionId'
            ]),
      	handleCurrentChange(val){
            console.log(`当前页: ${val}`);
            this.pageIndex=val;
            this.init()
        },
       	
        ccn(row, column, cellValue){
          if(cellValue!=0){
             return (cellValue/100)
          }else{
            return cellValue
          }
        },
        cancelLending(row){
        	this.$confirm('您确认要取消放款吗？', '确认信息', {
				distinguishCancelAndClose: true,
				confirmButtonText: '确认',
				cancelButtonText: '取消'
			})
			.then(() => {
				let msg = {
        			id:row.lendId,
        		}
        		receiptApi.lendCancelLend(msg)
                .then(result=>{
                    console.log(result)
                    this.init()
                })
                .catch(error => {
                    console.error(error)
                })
			})
			.catch(action => {
				
			});
        	
        },
        init(){
        	let msg = {
        		pageIndex:this.pageIndex,
        		pageSize:this.pageSize
        	}
        	this.isLoading=true
        	receiptApi.lendLendFailureList(msg)
                .then(result=>{
                    console.log(result)
                    this.isLoading=false
                    this.tableData=result.page.list
                    for(var i = 0;i<this.tableData.length;i++){
                    	if(this.tableData[i].brightTag==true){
							this.tableData[i].type='success'
							this.tableData[i].isDisabled=false
                    	}else if(this.tableData[i].brightTag==false){
                    		this.tableData[i].type='info'
                    		this.tableData[i].isDisabled=true
                    	}
                    }
                    console.log(this.tableData)
                    this.total=result.page.totalRow
                    this.pageIndex=result.page.pageNumber
                })
                .catch(error => {
                    console.error(error)
                    this.isLoading=false
                })
        },
		Relending(row,column){
			this.$confirm('您确认要重新放款吗？', '确认信息', {
				distinguishCancelAndClose: true,
				confirmButtonText: '确认',
				cancelButtonText: '取消'
			})
			.then(() => {
				let msg = {
					id:column.lendId,
				}
				receiptApi.lendLendAgain(msg)
                .then(result=>{
                    console.log(result)
                    column.type="info"
					column.brightTag=false
                    //this.init()
                })
                .catch(error => {
                    console.error(error)
                })
				
			})
			.catch(action => {
				
			});
        },
    },

    created(){
    	//this.sessionId=Storage.get('51SjdAdmin_sessionId')
      	this.init()
    },
}
</script>
<style >
#LoanFailure .el-button--mini{
	font-size: 15px;
}
</style>
<style lang="scss" scoped>

@import "../sass/variables";
      #LoanFailure{
      	font-weight: normal;
      	padding:0;
      	padding:20px;
      	.el-table{
      		font-size: 15px;
      	}
      	.box-card{
      		margin:0!important;
      	}
      	.el-button{
      		line-height: 20px;
      	}
      }
      .content{
      }
      .page{
      	margin-top:10px;
      }
</style>